I think this can be solved with adding word-break: break-word; to the td element. however the key column may wrapped as well. This can be solved by adding fixed size to the key column.

Another solution is to wrap the value inside the pre tag. here the example:

<!-- CSS -->
<style>
.ui.table td pre {
  white-space: pre-wrap;
  word-break: break-word;
}
</style>

<!-- HTML -->
<table>
  ...
  <tbody>
    <tr>
      <td>the.key</td>
      <td><pre>the value here</pre></td>
    </tr>
  </tbody>
</table>

Table overflow has it's own weird rules that generally don't follow what other HTML elements do. table-layout: fixed would achieve wrapping but has unknown side-effects and the page gets pretty long with with all that JSON.

Maybe it's also good to wrap the JSON into a <pre><code>.

You can add the fixed class to table to fix it. It makes both columns 50% width which is often too wide for the first column, but I can't really find another way to fix this, besides swapping table for flexbox which could do what we want.

Would be nice if key would be vertically aligned to top